// const BASE_URL = 'http://api-breakingnews-web.itheima.net'

// 获取分类数据
function loadCategory() {
  articleCates(res => {
    $('tbody').empty()
    res.data.data.forEach(v => {
      let list = `<tr>
                    <td>${v.name}</td>
                    <td>${v.alias}</td>
                    <td>
                      <button myid="${v.Id}" data-name="${v.name}" data-alias="${v.alias}" type="button" class="layui-btn layui-btn-xs edit">编辑</button>

                      <button myid="${v.Id}" type="button" class="layui-btn layui-btn-xs layui-btn-danger delete">删除</button>
                    </td>
                  </tr>`
      $('tbody').append(list)
    })
  })
}
loadCategory()

// 添加类别
$('.add').on('click', function () {
  // 弹框
  let index = layer.open({
    type: 1,
    content: add_str, // 弹层里显示的内容
    title: '新增分类',
    area: ['500px', '300px'],
    // 和$.ajax的success一样
    success() {
      console.log('success..................')

      // 提交
      $('.add-form').on('submit', function (e) {
        e.preventDefault()

        let data = $('form').serialize()
        addCates(data, res => {
          loadCategory()
          let { status, message } = res.data
          if (status === 0) {
            successMsg(message)
          } else {
            errorMsg(message)
          }
          layer.close(index)
        })
      })
    }
  })
})

// 编辑
$('tbody').on('click', '.edit', function () {
  // 获取之前添加在标签上的数据
  let id = $(this).attr('myid')
  let name = $(this).attr('data-name')
  let alias = $(this).attr('data-alias')
  // 弹框
  let index = layui.layer.open({
    type: 1,
    content: edit_str,
    title: '编辑分类',
    area: ['500px', '300px'],
    success() {
      $('#edit_form input[name=name]').val(name)
      $('#edit_form input[name=alias]').val(alias)

      $('#edit_form').on('submit', function (e) {
        e.preventDefault()

        let name = $('#edit_form input[name=name]').val()
        let alias = $('#edit_form input[name=alias]').val()
        let data = `name=${name}&alias=${alias}&Id=${id}`
        console.log(data)

        updateCate(data, res => {
          let { status, message } = res.data
          if (status === 0) {
            successMsg(message)
            loadCategory()
          } else {
            errorMsg(message)
          }
          layer.close(index)
        })
      })
    }
  })
})

// 删除
$('tbody').on('click', '.delete', function () {
  let id = $(this).attr('myid')

  layer.confirm('确定删除吗?', function (index) {
    deleteCate(id, res => {
      let { status, message } = res.data
      if (status === 0) {
        successMsg(message)
        loadCategory()
      } else {
        errorMsg(message)
      }
      layer.close(index)
    })
  })
})

// 添加类别表单
let add_str = `
<form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="add_form">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit lay-filter="formDemo">确认添加</button>
        <button type="reset" class="layui-btn layui-btn-primary">重置</button>
      </div>
    </div>
</form>`

// 编辑分类
let edit_str = `
  <form class="layui-form add-form" action="" style="margin: 30px; margin-left: 0px;" id="edit_form" lay-filter="edit">
    <div class="layui-form-item">
      <label class="layui-form-label">类别名称</label>
      <div class="layui-input-block">
        <input type="text" name="name" required lay-verify="required|ctname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <div class="layui-form-item">
      <label class="layui-form-label">类别别名</label>
      <div class="layui-input-block">
        <input type="text" name="alias" required lay-verify="required|aliname" placeholder="请输入标题" autocomplete="off" class="layui-input">
      </div>
    </div>
    <input type="hidden" name="Id">
    <div class="layui-form-item">
      <div class="layui-input-block">
        <button class="layui-btn" lay-submit >确认修改</button>
      </div>
    </div>
  </form>`
